import React from "react";
// import Alive from '@ali/moying'
// import { saveFormData, saveImg, clearData } from '../store/home/action';
// import { connect } from 'react-redux'
// import Header from "../components/Header";
// import Http from '../http/config'
// import Api from '../http/api'
// import HomeComponent from '../components/Home'

import aliveData from "core/animate"

class Index extends React.Component {
    constructor(props) {
        super(props)
        console.log(this)
        this.handleDown = this.handleDown.bind(this);
    }


    componentWillMount() {
        this.setState({
            class3: "ko-text3 none",
            button: "click-btn",
            num: 5,
            numTime:"timmer none"
        })
    }

    componentDidMount() {
        this.alive = new window.Alive({
            data: aliveData,
            container: document.getElementById('J_alive')
        })
        this.alive.render();
        setTimeout(() => {
            // this.alive.play();
        }, 1000)
        this.alive.on('over', () => {
            console.log('动画播放结束')
        })

    }

    handleDown() {
        console.log(123)
        if (this.alive) {
            if (window.localStorage.getItem("applyNum")) {
                this.startAnimate();
            } else {
                setTimeout(() => {
                    window.localStorage.setItem("applyNum", 1)
                    this.startAnimate()
                }, 1000)
            }
        }

    }


    startAnimate() {
        this.setState({
            class3: "ko-text3",
            numTime:"timmer"
        })
        this.alive.play();
        this.timmer=setInterval(()=>{
            if(this.state.num===1){
                clearInterval(this.timmer)
                this.setState({
                    button: "click-btn none",
                    numTime:"timmer none"
                })
            }else{
                this.setState({
                    num: --this.state.num
                })
            }
        },1000)
    }

    render() {
        return (
            <div>
                {/*<Header></Header>*/}
                {/*<div></div>*/}
                <div className={"animate-con"}>
                    <div id={"J_alive"}></div>
                </div>


                <div className={this.state.class3}>
                    50<span>位</span>
                </div>
                <div onTouchStart={this.handleDown} className={this.state.button}>
                    <img src="https://img.alicdn.com/tfs/TB12qRSQkzoK1RjSZFlXXai4VXa-150-195.png" alt=""/>
                    <div className={"ko-shade"}>

                    </div>
                </div>
                <div className={this.state.numTime}>{this.state.num}</div>
            </div>

        );
    }
}

export default Index;


